<template>
    <section>
        <el-card class="box-card" style="max-width:1000px; padding:0px 50px 50px; margin:30px auto 50px;">
            <el-col align="right">
                <div class="section">
                    <el-button
                            type="primary"
                            :disabled="dowFileStatus"
                            :loading="dowFileStatus"
                            @click="dowCheckReportFile"
                    >下载检查报告</el-button>
                    <el-button type="info" disabled>{{ formattStatus(reportData.check_report_status) }}</el-button>
                    <el-button type="primary" plain @click="cancel">返回</el-button>
                </div>
            </el-col>

            <el-col>
                <div class="section">
                    <div class="head-item">
                        <div class="head-val">高校名称</div>
                        <div class="head-title">{{reportData.check_unit}}</div>
                    </div>
                    <div class="head-item">
                        <div class="head-val">检查组组长</div>
                        <div class="head-title">{{reportData.group_user_name}}</div>
                    </div>
                    <div class="head-item">
                        <div class="head-val">专家</div>
                        <div class="head-title">
                            <span v-for="(user,idx) in reportData.check_user" v-if="user.full_name != reportData.group_user_name" style="margin-right:15px;">
                                {{user.full_name}}
                                 <router-link  :to="'/records/view/'+reportData.check_work_list.check_work[idx].id"><el-tag class="zy">作业</el-tag></router-link>
                            </span>
                        </div>
                    </div>
                    <div class="head-item" v-if="reportData.check_report_status == 1 || reportData.check_report_status == 3">
                        <div class="head-val">检查项数量</div>
                        <div class="head-title">{{formatItemCount()}}
                    </div>
                    </div>
                </div>
            </el-col>
            <div v-if="reportData.check_report_status !=0 && reportData.check_report_status !=2">
                <el-col>
                    <div class="body-item">
                        <div class="body-title" v-if="reportData.check_report_status">综合意见</div>
                        <div style="margin-top:10px;"></div>
                        <el-input
                                :autosize="true"
                                type="textarea"
                                resize="none"
                                class="showTextConter"
                                v-model="reportData.suggestion"
                                readonly>
                        </el-input>
                    </div>
                </el-col>

                <el-col>
                    <div class="body-item"  v-if="reportData.check_report_status">
                        <div class="body-title">检查项</div>

                        <div v-for="item in reportData.check_item_desc" class="body-inspect">
                            <div class="inspect-title">
                                <!--<span :class="'cyc cyc-' + formatCyc(item.check_content_status)"></span>-->
                                <span>{{item.check_item_three_order_number + '.&nbsp;' + item.check_item_three}}</span>
                            </div>
                            <div class="inspect-info">
                                <div class="info-title">图片</div>
                                <div class="info-img">
                                    <img @click="showImg(img.path)" v-for="img in item.image_list" :src="fixUrl(img.path)"/>
                                </div>
                            </div>
                            <div class="inspect-info">
                                <div class="info-title">楼宇 - 房间号</div>
                                <div>
                                    <el-tag  v-for="(lab, index) in item.building_room" :key="index" type="success" style="margin-right:15px;">{{lab.building}}</el-tag>
                                </div>

                            </div>
                            <div class="inspect-info">
                                <div class="info-title">描述信息</div>
                                <div class="info-item">
                                    <el-input
                                            :autosize="true"
                                            type="textarea"
                                            v-model="item.desc"
                                            resize="none"
                                            class="showTextConter"
                                            readonly>
                                    </el-input>
                                </div>

                            </div>
                        </div>

                    </div>
                </el-col>
            </div>
            <div v-else>
                <el-col>
                    <span style="display:block; text-align:center; line-height:80px;color:#999;">报告{{ formattStatus(reportData.check_report_status) }}</span>
                </el-col>
            </div>
        </el-card>
        <!--对话框-显示大图-->
        <el-dialog title="显示大图" :visible.sync="big_img_dialog.show">
            <img class="big-img" :src="big_img_dialog.path">
        </el-dialog>
    </section>
</template>

<script>
    import * as api from '../../api/report_api'
    import {createNoticeFile} from '../../api/report_manager_api'
    import dict from '../../common/js/dict';
    import {getResourceUrl} from '../../api/common';
    import { saveAs } from '../../common/js/commons';

    export default {
        data() {
            return {
                dict: dict,
                loading: false,
                dowFileStatus: false,
                big_img_dialog: {
                    show: false,
                    path: ''
                },
                resource_url: '',
                //表格数据
                reportData: {}
            }
        },
        methods: {
            showImg(path) {
                this.big_img_dialog.path = this.fixUrl(path);
                this.big_img_dialog.show = true;
            },
            cancel() {
                this.$router.push('/report/list');
            },
            dowCheckReportFile(){
                this.dowFileStatus = true
                let params = {
                    id: this.$route.params.id,
                    type:1
                }
                createNoticeFile(params).then((res) => {
                    if (res.data.status == 200) {
                        this.dowFileStatus = false
                        saveAs(res.data.datas,'')
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                        this.dowFileStatus = false
                    }
                })
            },
            formatCyc(status) {
                switch (status.toString()) {
                    case '0':
                        return 'red';
                    case '2':
                        return 'green';
                    case '1':
                    default:
                        return 'orange';
                }
            },
            formatStar(cnt) {
                switch (cnt) {
                    case '1':
                        return '★';
                    case '2':
                        return '★★';
                    case '3':
                        return '★★★';
                    case '0':
                    default:
                        return '';
                }
            },
            fixUrl(url) {
                if (url && url.length > 0 && url.toLowerCase().indexOf("http:") != 0) {
                    return this.resource_url + url;
                }
                return url;
            },
            formatItemCount() {
                return parseInt(this.reportData.check_item_uncount) + parseInt(this.reportData.check_item_con_count) + parseInt(this.reportData.check_item_very_count);
            },
            formattStatus(status) {
                return this.dict.report_status[status]
            },
            //初始化页面
            initData() {

                if (this.resource_url.length == 0) {
                    getResourceUrl().then((res) => {
                        if (res.data.status == 200) {
                            this.resource_url = res.data.datas;
                        } else {
                        }
                    });
                }
                let params = {
                    id: this.$route.params.id
                };

                api.getReportDetail(params).then((res) => {
                    if (res.data.status == 200) {
                        let data = JSON.parse(res.data.datas);
                        if (data && data.check_item_desc && data.check_item_desc.length > 0) {

                            data.check_item_desc = data.check_item_desc.sort(function (a, b) {
                                return a.check_item_three_item_order - b.check_item_three_item_order;
                            });
                        }
                        this.reportData = data;
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                });
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>

<style scoped>
.zy{
    line-height:22px;
    height:22px;
    padding:0 4px;
}
    .head-item {
        margin-bottom:5px;
        text-align: left;
        overflow: hidden;
    }

    .head-title {
         width:85%;
         float:left;
        color: #000;
        display: inline-block;
        text-align: left;
        margin-right: 10px;
    
    }

    .head-val {
       
        float:left;
        display: inline-block;
        color: #666;
        width: 130px;
  
    }

    .head-val span {
        margin-right: 10px;
    }

    .section {
        margin-top: 15px;
        padding-bottom: 20px;
        border-bottom: solid 1px #eceaea;
    }

    .cyc {
        border-radius: 5px;
        width: 10px;
        height: 10px;
        display: inline-block;
        display: -webkit-inline-box;
    }

    .cyc-margin {
        margin: 0 5px 0 10px;
    }

    .cyc-green {
        background-color: #7ED321;
    }

    .cyc-orange {
        background-color: #F5A623;
    }

    .cyc-red {
        background-color: #D0021B;

    }

    .body-item {
        color: #000;
        margin-top: 25px;
    }

    .body-title {
        font-weight: bold;
        line-height:22px;
        margin-bottom: 10px;
    }

    .body-val {
        margin-top: 10px;
        border: solid 1px #eceaea;
        padding: 10px;
        min-height: 50px;
    }

    .body-inspect {
        margin-top: 20px;
        border: solid 1px #eceaea;
        padding: 20px 30px 0;
    }

    .inspect-title {
        line-height:22px;
        padding-top:10px;
    }

    .inspect-title span{
        color: #000;
        font-size:16px;
    }
    .star {
        margin: 0 3px;
    }

    .inspect-info {
        margin-top:30px;
    }

    .info-title {
        color: #000;
        font-weight: bold;
        line-height:18px;
        margin-bottom:15px;
    }

    .info-img{
        line-height:1;
    }
    .info-item {
        margin-top: 10px;
    }

    .info-img img {
        cursor: pointer;
        height: 75px;
        width: 75px;
        margin-right: 10px;
        display: inline-block;
    }

    .big-img {
        max-width: 100%;
    }
</style>
